<template>
	<div class="showDicom"><div class="showDicom_left handle">
			<h6 class="card-header">患者信息</h6>
			<div class="showDicom_msg">

				<el-card shadow="never" style="background-color: transparent;border:0px;">

					<p class="text">{{ 'id:' + person.id }} </p>
					<p class="text">{{ '姓名:' + person.name }}</p>
					<p class="text">{{ '性别:' + person.sex }} </p>
					<p class="text">{{ '年龄：' + person.age }}</p>
					<p class="text">{{ '电话:' + person.tel }} </p>
					<p class="text">{{ '部位:' + person.zone }}</p>
					<p class="text">{{ '过敏史:' + person.his }}</p>

				</el-card>
			</div>
			<h6 class="card-header">操作步骤</h6>
			<div class="showDicom_steps">
				<div style="height: 310px; max-width: 600px;margin-top: 10px;">
					<el-steps direction="vertical" :active="-1"
						style="height: 310px; max-width: 600px;margin-top: 10px;">
						<el-step title="Step 1 上传图片" />
						<el-step title="Step 2 点击开始处理" />
						<el-step title="Step 3 点击单张图片进行预览" />
						<el-step title="Step 4 查看历史记录" />
					</el-steps>
				</div>
			</div>
		</div>

		<div class="showDicom_middle">

			<!-- 配置上传的触发元素，例如按钮 -->
			<!-- 上传组件，用于选择文件 -->
			<div id="up" style="display: flex;">
				<div style="margin-right: 50px;">


					<el-upload class="avatar-uploader" :action="uploadUrl" :on-success="handleSuccess"
						:on-preview="handlePreview" :on-change="handleChange" list-type="picture-card"
						:auto-upload="false" :file-list="fileList" :limit="1" :show-file-list="false">

						<img v-if="url[0]" :src="url[0]" style="height: 100%; width: 100%;" alt="" title="">
						<el-icon v-else class="avatar-uploader-icon" style="transform: scale(2.5);">
							<Plus />
						</el-icon>


					</el-upload>
					<el-button type="primary"  style=" margin-left: 150px; margin-top: 5px;width: 100px;font-size: larger;"
						@click="upload">开始处理</el-button>
				</div>
				<div>

					<el-image style="width: 400px; height: 400px" :src="url[1]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="url" :initial-index="1" fit="cover" />
					<p align="center" class="desc">高斯滤波</p>
				</div>


			</div>
			<div id="down" style="margin-top: 50px; display: flex;">
				<div style="margin-right: 50px;">

					<el-image style="width: 400px; height: 400px" :src="url[2]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="url" :initial-index="2" fit="cover" />
					<p align="center" class="desc"> 均匀滤波</p>
				</div>
				<div>

					<el-image style="width: 400px; height: 400px	" :src="url[3]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="url" :initial-index="3" fit="cover" />
					<p align="center" class="desc">中值滤波</p>
				</div>

			</div>

		</div>

		<div class="showDicom_right1">
			<h6 class="card-header">历史记录</h6>
			<el-table class="history" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">

				<el-table-column prop="time" label="时间" width="180" />
				<el-table-column prop="" label="操作" width="100">
					<template v-slot="scope">
						<el-button type="primary" size="small" @click="showUrl(scope.$index)">
							查看
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog v-model="dialogVisible" title="" width="500" style="background-color: #171717;">
			<div>
				<div>
					<p class="text" align="left">原图</p>
					<el-image style="width: 400px; height: 400px" :src="detail[0]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="1" fit="cover" />
					
				</div>
				<div>
					<p class="text" align="left">腐蚀</p>
					<el-image style="width: 400px; height: 400px" :src="detail[1]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="1" fit="cover" />
					
				</div>
				<div style="margin-right: 50px;">
					<p class="text"> 黑顶帽</p>
					<el-image style="width: 400px; height: 400px" :src="detail[2]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="2" fit="cover" />
					
				</div>
				<div>
					<p class="text">白顶帽</p>
					<el-image style="width: 400px; height: 400px	" :src="detail[3]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="3" fit="cover" />
					
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios';

export default {
	data() {
		return {
			// 上传的图片

			faliedUrl: "https://kyl1n.oss-cn-beijing.aliyuncs.com/Snipaste_2024-05-01_16-42-27-PicPicAI-enhanced.png",
			// 上传的接口URL
			uploadUrl: 'http://154.91.178.151:8088/enhanceImage',
			getUrl: 'http://154.91.178.151:8088/history/enhance',
			url: [
			],
			fileList: [],
			tableData: [
        
        {
            "images": [
				"https://kyl1n.oss-cn-beijing.aliyuncs.com/og.png",
				"https://kyl1n.oss-cn-beijing.aliyuncs.com/%E8%85%90%E8%9A%80.png",
				"https://kyl1n.oss-cn-beijing.aliyuncs.com/%E9%BB%91%E9%A1%B6%E5%B8%BD.png",
				"https://kyl1n.oss-cn-beijing.aliyuncs.com/%E7%99%BD%E9%A1%B6%E5%B8%BD.png"
            ],
            "time": "2024-05-07 20:38:50"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/1ade8b09-b0dc-42c3-ab0c-cbae86d0b128.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=d6d033f0cc1c84450654e495c38c5f497e495dc9d7b617ea6e7e3019e9d244da",
                "http://123.249.83.150:9000/picture/181176e9-da0c-4775-a191-c278cca2a7fd.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=b490cdfc4eb96625a9cc60840fa5a0d84e41795670aafd43652a46240501203c",
                "http://123.249.83.150:9000/picture/f5b76978-466f-4d43-a45c-fbf6e7cb6b8d.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=561350eb77b78e8ede409e7713b71ab7bff98c61f9277d5db8814a85be33dcd9",
                "http://123.249.83.150:9000/picture/2ba9f5c7-b8a5-4841-ac58-cbf8b2c06e23.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=4cb6d196b19f39e4cd4bb100e1d20214a3b8362120a8f84bc76d856c0c0e1a1f"
            ],
            "time": "2024-05-07 20:37:12"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/8b423a3c-472a-41fd-b6d1-4e53d1bf59dc.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=d7225617eb18289431e47fef979542a8586c310b02e8df39d39b04ce4f0371e5",
                "http://123.249.83.150:9000/picture/0cd6b57d-e9cd-4913-93e1-2e5fc7e96b08.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=836b95edf373d0130b74707a5daf6b46abfe0a8169ce41a31296c2d59006f819",
                "http://123.249.83.150:9000/picture/23cb0efb-7bf7-4851-9b2a-5ff5a207e399.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=b30a0719fe2590cc9b29f296ea45d61b6fc7e259e3939f4847e317a7580c99b3",
                "http://123.249.83.150:9000/picture/90d48130-fe83-4940-ac42-c24a2e68c2f6.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=7cda8feb15d206597c366c12829ce5321765c8cc0070f086de4c614265acb8c7"
            ],
            "time": "2024-05-07 20:31:55"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/8f76b7d2-988e-4c67-9357-13338e0467dc.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=eec380e82c91f2d560707e1e5576e5fb3ace02d5b5739bcd7475d8b6f41ba39b",
                "http://123.249.83.150:9000/picture/5ecd994a-6dd4-4a4e-938e-50b016da844c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=cfa3c8739ddf0f5151d043e3433eba596a093428b849cc2769d836376b730f17",
                "http://123.249.83.150:9000/picture/bddd388a-1c89-4096-a76c-55fd1354871c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=2ada25b0b450f59883c5a3784511cd562938d194bcc7c0028a83e91339cb6cb7",
                "http://123.249.83.150:9000/picture/4e5457ed-5cd3-4d42-999b-29ed6b2cfd8c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052114Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=d3e4c350ca5703cb277e6468ac98ec50c220e08f7fdc023a7e0bf559ef4324e0"
            ],
            "time": "2024-05-07 20:31:25"
        }
    ],
			person: {
				id: "2024001",
				name: "李明",
				sex: "男",
				age: "20",
				tel: "188182823",
				zone: "肺部",
				his: "无"
			},
			detail: ["", "", ""],
			dialogVisible: false,
			urls: ["https://kyl1n.oss-cn-beijing.aliyuncs.com/og.png", "https://kyl1n.oss-cn-beijing.aliyuncs.com/%E9%AB%98%E6%96%AF%E6%BB%A4%E6%B3%A2.png", "https://kyl1n.oss-cn-beijing.aliyuncs.com/%E5%9D%87%E5%80%BC%E6%BB%A4%E6%B3%A2.png", "https://kyl1n.oss-cn-beijing.aliyuncs.com/%E4%B8%AD%E5%80%BC%E6%BB%A4%E6%B3%A2.png"]
		};
	},
	mounted() {
		this.url[0] = "";
		for (var i = 1; i < 4; i++) {
			this.url[i] = this.faliedUrl
		}
		// axios({
		//        url: this.getUrl,
		//        method: 'get',

		//      })
		//     .then(response => {
		// 		this.tableData = response.data.data
		// 	})
		//     .catch(this.handleError);
	},
	methods: {
		upload() {
			// const someIntParam = 1;
			// // 假设只有一个文件上传
			// const file = this.fileList[0].raw;
			// console.log(file)
			// const formData = new FormData();
			// formData.append('file', file);




			// axios({
			//         url: this.uploadUrl,
			//         method: 'post',
			//         data: formData,
			// 		params: {	
			//                      type: 1
			// 		},
			//         headers: {
			//           'Content-Type': 'multipart/form-data', // 必须设置，即使不显式设置，axios也会默认添加

			//         },
			//       })
			//       .then(response => {
			// 		  console.log(response.data.data)
			// 		this.url = response.data.data
			// 	  })
			//       // .catch(this.handleError);

			// axios({
			//        url: this.getUrl,
			//        method: 'get',

			//      })
			//     .then(response => {
			// 		this.tableData = response.data.data
			// 	})
			//     .catch(this.handleError);
			// console.log(this.tableData)
			for (var i = 0; i < 4; i++) {
				this.url[i] = this.urls[i];
			}
		},
		// 文件上传成功后的回调
		handleSuccess(response, file, fileList) {
			// 通常在这里处理上传成功后的逻辑，例如更新fileList

		},
		// 文件预览的回调
		handlePreview(file) {
			console.log(file);
			// 可以在这里打开一个新窗口或使用组件来预览图片
		},
		// 文件移除的回调
		handleChange(file, fileList) {
			// 处理文件移除后的逻辑
			this.fileList = fileList;
		},
		showUrl(idx) {
			this.dialogVisible = true
			for (var i = 0; i < 4; i++) {
				this.detail[i] = this.tableData[idx].images[i]
			}
		}

	},
}
</script>


<style></style>